<template>
  <div class="overview">
    <Wycard title="关于"
      ><strong
        >Vue3
        Admin是基于Vue3、Vuex、VueRouter、.Vite、ElementPlus、TypeScript、Echarts5等后台系统解决方案。</strong
      >
    </Wycard>
    <wycard class="wycard" title="技术栈">
      <div class="wycard-uli">
        <ul>
          <li>开发工具：<span>Vscode</span></li>
          <li>编程语言：<span>TypeScript 4.x +JavaScript</span></li>
          <li>构建工具：<span>Vite 2.x / Webpack5.x</span></li>
          <li>前端框架：<span>Vue 3.x</span></li>
          <li>路由工具：<span>Vue Router 4.x</span></li>
          <li>状态管理：<span>Vuex 4.X</span></li>
          <li>UI框架：<span>Element Plus</span></li>
          <li>可视化：<span>Echart5.x</span></li>
          <li>富文本：<span>WangEditor</span></li>
          <li>工具库：<span>vueuse/core dayjs countup.Js</span></li>
          <li>数据模拟：<span>mockjs</span></li>
          <li>css预编译：<span>Sass/Less</span></li>
          <li>HTTP工具：<span>Axios</span></li>
          <li>git Hook工具：<span>Hushy</span></li>
          <li>代码规范：<span>EditorConfg Prettier ESLInt</span></li>
          <li>提交规范：<span>Commltizen Commltlint</span></li>
          <li>自动部署：<span>Centos Jenkins Nglnx</span></li>
        </ul>
      </div>
    </wycard>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Wycard from '@/base-ui/card'
export default defineComponent({
  name: 'overview',
  components: {
    Wycard
  },
  setup() {
    return {}
  }
})
</script>

<style scoped lang="less">
.wycard {
  margin-top: 20px;
  li {
    text-align: left;
    padding-top: 10px;
    span {
      color: #86c9f7;
    }
  }
}
</style>
